<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {useRouter} from "vue-router";
import {Download} from "@element-plus/icons-vue";
import {
  bindClassApi,
  getAchievementListApi,
  getAllFacultiesApi,
  getAllUnbindClassApi,
  getStudentListApi, getTeacherApprovalListApi,
  listAuditApi
} from "@/api/school.js";
import {formatTypeName, getYearList} from "@/utils/index.js";
import useUserStore from "@/store/modules/user.js";

const router = useRouter()
const {proxy} = getCurrentInstance();
const userStore = useUserStore()

const state = reactive({
  permission: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    auditStu: '',
    stuNum: '',
    stuFaculties: '',
    stuPhone: '',
    yearEnrollment: '',
    stuClass: '',
    auditStatus: '',
  },
  total: 0,
  tableData: [],
  // 学院列表
  facultiesList: [],
  editForm: {
    facultiesId: '',
    stuClass: '',
  },
  searchClassForm: {
    facultiesId: '',
    className: '',
  },
  // 班级列表
  classList: [],
  rules1: {
    roleKey: [
      {required: true, message: '请选择绑定角色', trigger: 'blur'},
    ],
    facultiesId: [
      {required: true, message: '请选择学院', trigger: 'blur'},
    ],
    stuClass: [
      {required: true, message: '请选择班级', trigger: 'blur'},
    ],
  },
  ids: [],
})

const showDia1 = ref(false)

const handleEdit = (id) => {
  router.push('captainApproval/details?id=' + id)
}

const handleBind = async () => {

  showDia1.value = true
}

const handleMine = () => {
  router.push('teacherApproval/myStudents')
}

const getDataList = async () => {
  const res = await getTeacherApprovalListApi(state.queryParams)
  if (res.code == 200) {
    state.tableData = res.rows
    state.total = res.total
  }
}

const getFacultiesList = async () => {
  const res = await getAllFacultiesApi()
  if (res.code == 200) {
    state.facultiesList = res.data
  }
}

const getClassList = async (query) => {
  const params = {
    pageSize: 50
  }

  if (query) {
    params.className = query
  }

  if (state.searchClassForm.facultiesId) {
    params.facultiesId = state.searchClassForm.facultiesId
  }
  const res = await getAllUnbindClassApi(params)

  if (res.code == 200) {
    console.log(res.data, "res.datares.data")
    state.classList = res.data
  }
}

// 改变学院时，获取班级列表
const changeFaculties = async (val) => {
  state.searchClassForm.facultiesId = val
  state.searchClassForm.roleKey = 'teacher'
  await getClassList()
}

const closeClassDia = () => {
  state.editForm = {
    facultiesId: '',
    stuClass: '',
  }
  proxy.resetForm("classFormRef");
  showDia1.value = false
}

const submitForm1 = () => {
  proxy.$refs["classFormRef"].validate(async valid => {
    if (valid) {
      state.editForm.id = state.editForm.stuClass
      const res = await bindClassApi(state.editForm)
      if (res.code == 200) {
        closeClassDia()
        proxy.$message.success('操作成功')
      }
    }
  })
}

const resetSearch = () => {
  state.queryParams = {
    pageNum: 1,
    pageSize: 10,
  }
  getDataList()
}

const handleExport = () => {
  proxy.download("school/audit/export1", {
    ...state.queryParams
  }, `审批记录.xlsx`);
}

// 获取当前老师的权限信息
const getPermission = async () => {
  state.permission = userStore.roles
  if (state.permission.includes('teacher')) {
    state.queryParams.teacherType = 0
  } else {
    state.queryParams.teacherType = 1
  }
}


onMounted(() => {
  getDataList()
  getFacultiesList()
  getPermission()
})
</script>

<template>
  <div class="outBox">
    <CardBox style="margin-bottom: 20px" title="筛选查询">
      <template #btn-cont>
        <el-button type="primary" @click="getDataList">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </template>
      <template #content>
        <el-form :model="state.queryParams" label-width="auto" inline="true">
          <el-row gutter="24">
            <el-col :span="4">
              <el-form-item label="姓名">
                <el-input v-model="state.queryParams.stuName" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="学号">
                <el-input v-model="state.queryParams.stuNum" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="院系">
                <el-select v-model="state.queryParams.stuFaculties" placeholder="请选择" @change="changeFaculties">
                  <el-option
                      v-for="item in state.facultiesList"
                      :key="item.id"
                      :label="item.facultiesName"
                      :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="联系电话">
                <el-input v-model="state.queryParams.stuPhone" placeholder="请输入"/>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="年级">
                <el-select v-model="state.queryParams.yearEnrollment" placeholder="请选择">
                  <el-option
                      v-for="item in getYearList()"
                      :key="item"
                      :label="item"
                      :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="班级">
                <el-input v-model="state.queryParams.stuClass" placeholder="请输入"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row gutter="24">
            <el-col :span="4">
              <el-form-item label="审核状态">
                <el-select v-model="state.queryParams.auditStatus" style="flex: 1" placeholder="请选择">
                  <el-option label="待审核" value="1"/>
                  <el-option label="通过" value="2"/>
                  <el-option label="未通过" value="3"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="审核类别">
                <el-select v-model="state.queryParams.auditType" style="flex: 1" placeholder="请选择">
                  <el-option label="学科竞赛" :value="1"/>
                  <el-option label="实战成果" :value="2"/>
                  <el-option label="技能证书" :value="4"/>
                  <el-option label="专利/软著" :value="5"/>
                  <el-option label="论文发表" :value="6"/>
                  <el-option label="大创项目" :value="7"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </CardBox>
    <CardBox title="审批管理">
      <template #btn-cont>
        <el-button type="primary" @click="handleMine">我的学生</el-button>
        <el-button type="primary" @click="handleBind">绑定我的班级</el-button>
        <el-button type="primary" @click="handleExport">
          <el-icon>
            <Download/>
          </el-icon>
          <span>导出</span>
        </el-button>
      </template>
      <template #content>
        <el-table :data="state.tableData" style="width: 100%">
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="stuName" label="姓名" align="center"/>
          <el-table-column prop="stuNum" label="学号" align="center"/>
          <el-table-column prop="stuFaculties" label="院系" align="center"/>
          <el-table-column prop="yearEnrollment" label="年级" align="center">
            <template #default="scope">
              {{ scope.row.yearEnrollment }} 级
            </template>
          </el-table-column>
          <el-table-column prop="auditStuClass" label="班级" align="center"/>
          <el-table-column prop="auditTitle" label="标题" align="center">
            <template #default="scope">
              <el-tooltip
                  class="box-item"
                  effect="dark"
                  :content="scope.row.auditTitle"
                  placement="top"
              >
                <div>{{ scope.row.auditTitle.substring(0, 10) }}</div>
              </el-tooltip>

            </template>
          </el-table-column>
          <el-table-column prop="auditStatus" label="审核状态" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.auditStatus == 1" type="info">待审核</el-tag>
              <el-tag v-if="scope.row.auditStatus == 2" type="success">通过</el-tag>
              <el-tag v-if="scope.row.auditStatus == 3" type="danger">未通过</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="auditStatus" label="审核类别" align="center">
            <template #default="scope">
              {{ formatTypeName(scope.row.auditType) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" size="small" link @click="handleEdit(scope.row.id)">审核详情</el-button>
              <!--              <el-button type="danger" size="small" link>删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>

        <div class="pageBox">
          <pagination
              v-show="state.total > 0"
              :total="state.total"
              v-model:page="state.queryParams.pageNum"
              v-model:limit="state.queryParams.pageSize"
              @pagination="getDataList()"/>
        </div>
      </template>
    </CardBox>

    <el-dialog title="绑定班级" v-model="showDia1" width="400" :center="true">
      <div>
        <el-form label-width="80px" ref="classFormRef" :model="state.editForm" :rules="state.rules1">
          <el-form-item label="绑定角色" prop="roleKey">
            <el-select v-model="state.editForm.roleKey" placeholder="请选择"
                       v-if="!state.permission.includes('superManager') && !state.permission.includes('admin')"
                       style="width: 150px;margin-right: 15px">
              <el-option label="学业导师" value="teacher" v-if="state.permission.includes('teacher')"/>
              <el-option label="专业教师" value="teacher2" v-if="state.permission.includes('teacher2')"/>
            </el-select>
          </el-form-item>
          <el-form-item label="学院" prop="facultiesId">
            <el-select v-model="state.editForm.facultiesId"
                       @change="changeFaculties"
                       placeholder="请选择">
              <el-option v-for="item in state.facultiesList"
                         :key="item.id"
                         :label="item.facultiesName"
                         :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="班级" prop="stuClass">
            <el-select v-model="state.editForm.stuClass"
                       placeholder="请选择"
                       style="width: 200px;"
                       filterable
                       remote
                       reserve-keyword
                       :remote-method="getClassList">
              <el-option v-for="item in state.classList" :key="item.id"
                         :label="item.className" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button @click="closeClassDia">取 消</el-button>
        <el-button type="primary" @click="submitForm1">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>
